<!--
 * @Author: lihaogn
 * @Date: 2021-11-23 22:36:47
 * @LastEditTime: 2021-11-23 23:14:01
 * @LastEditor: lihaogn
 * @Description: 全屏按钮
 * @FilePath: \lix-admin-vue2\src\components\common\lix-screenfull\index.vue
-->
<template>
  <div v-show="!isFullScreen">
    <i
      class="el-icon-full-screen"
      style="cursor: pointer;"
      title="全屏"
      @mouseenter="handleEnter"
      @mouseleave="handleLeave"
      @click="toggle"
    ></i>
  </div>
</template>

<script>
import screenfull from 'screenfull'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      isFullScreen: false
    }
  },
  computed: {
    ...mapGetters(['mainColor'])
  },
  mounted() {
    screenfull.on('change', this.handleChange)
  },
  beforeDestroy() {
    screenfull.off('change', this.handleChange)
  },
  methods: {
    /**
     * @author: lihaogn
     * @Date: 2021-11-23 23:01:06
     * @description: 鼠标移入事件
     * @param {*} e - 事件对象
     * @return {*}
     */

    handleEnter(e) {
      if (e) {
        e.target.style.color = this.mainColor
      }
    },
    /**
     * @author: lihaogn
     * @Date: 2021-11-23 23:08:52
     * @description: 鼠标移出事件
     * @param {*} e - 事件对象
     * @return {*}
     */

    handleLeave(e) {
      if (e) {
        e.target.style.color = 'inherit'
      }
    },
    /**
     * @author: lihaogn
     * @Date: 2021-11-23 23:04:00
     * @description: 切换全屏显示事件
     * @param {*}
     * @return {*}
     */

    toggle() {
      screenfull.toggle()
    },
    /**
     * @author: lihaogn
     * @Date: 2021-11-23 23:04:26
     * @description: 全屏变化绑定的事件
     * @param {*}
     * @return {*}
     */

    handleChange() {
      this.isFullScreen = screenfull.isFullscreen
    }
  }
}
</script>

<style></style>
